import React, { useState, useCallback, useEffect } from 'react';
import { getBcxtRoleBasicQuery, getBcxtWxUserSmsSend, putBcxtWxUserInfoCreate, getBcxtWxUserUpdateQuery, postBcxtWxUserInfoUpdate } from '../../../api';
import { message, Modal, Space, Input, Select, Form, Button } from 'antd';

const { Option } = Select;


const AddModule = ({ setAddModuleShow, addModuleShow, listFun, clickId, setClickId }) => {
    const [form] = Form.useForm();
    const { validateFields, resetFields, setFieldsValue } = form;
    const [roleList, setRoleList] = useState([]);
    const [authCode, setAuthCode] = useState(true);
    const [phoneValue, setPhoneValue] = useState(undefined); //手机号
    const [identification, setIdentification] = useState(undefined);
    const [timeValue, setTimeValue] = useState(60);
    const detailsFun = useCallback(
        () => {
            if (clickId) {
                ; (async () => {
                    const { code, msg, data } = await getBcxtWxUserUpdateQuery({ id: clickId });
                    if (code === "20000") {
                        setFieldsValue(data)
                    } else {
                        message.error(msg);
                    }
                })();
            }
        },
        [clickId, setFieldsValue],
    )
    const roleFun = useCallback(() => {
        ; (async () => {
            const { code, msg, data } = await getBcxtRoleBasicQuery();
            if (code === "20000") {
                setRoleList(data)
            } else {
                message.error(msg);
            }
        })();
    }, []);
    useEffect(() => {
        roleFun();
        detailsFun();
    }, [roleFun, detailsFun])
    const handleOk = () => {
        validateFields().then(values => {
            if (clickId) {
                values.id = clickId;
                ; (async () => {
                    const { code, msg } = await postBcxtWxUserInfoUpdate(values);
                    if (code === "20000") {
                        message.success('修改成功');
                        resetFields();
                        listFun();
                        setClickId(undefined);
                        setAddModuleShow(false);
                    } else {
                        message.error(msg);
                    }
                })();
            } else {
                values.tag = identification;
                ; (async () => {
                    const { code, msg } = await putBcxtWxUserInfoCreate(values);
                    if (code === "20000") {
                        message.success('添加成功');
                        resetFields();
                        listFun();
                        setAddModuleShow(false);
                    } else {
                        message.error(msg);
                    }
                })();
            }

        })
        
    };
    const handleCancel = () => {
        resetFields();
        setClickId(undefined);
        setAddModuleShow(false);
    };
    //发送验证码
    const handleAuthCodeFun = () => {
        if (!phoneValue) {
            message.error('请输入手机号');
            return;
        }
        setAuthCode(false);
        ; (async () => {
            const { code, msg, data } = await getBcxtWxUserSmsSend({ mobile: phoneValue });
            if (code === "20000") {
                setIdentification(data);
                let timer = setInterval(() => {
                    setTimeValue(timeValue => {
                        if (timeValue <= 0) {
                            clearInterval(timer);
                            setAuthCode(true);
                            setTimeValue(60);
                        } else {
                            return timeValue - 1
                        }

                    })
                }, 1000);
            } else {
                message.error(msg);
            }
        })();
    };
    //获取
    const handleChangePhone = e => {
        setPhoneValue(e.target.value)
    }
    return <Modal title={clickId ? "修改人员" : "添加人员"} visible={addModuleShow} onOk={handleOk} onCancel={handleCancel}>
        <Form
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            form={form}
        >
            <Form.Item
                label="报餐人员"
                name="wxName"
                rules={[{ required: true, message: '请输报餐人员!' }]}
            >
                <Input placeholder="请输入报餐人员" />
            </Form.Item>

            {
                clickId ? null : <> <Form.Item
                    label="手机号码"
                    name="wxMobile"
                    rules={[{ required: true, message: '请输入手机号码!' }]}
                >
                    <Input onChange={handleChangePhone} placeholder="请输入手机号码" />
                </Form.Item><Form.Item label="验证码">
                        <Space>
                            <Form.Item
                                name="code"
                                noStyle
                                rules={[{ required: true, message: '请输入验证码' }]}
                            >
                                <Input placeholder="请输入验证码" />
                            </Form.Item>
                            {
                                authCode ? <Button
                                    style={{ width: '100%' }}
                                    type="primary"
                                    onClick={() => handleAuthCodeFun()}
                                >
                                    获取验证码
                                </Button> : <Button type="primary" disabled  >
                                    {timeValue}s后重新发送
                                </Button>
                            }
                        </Space>
                    </Form.Item></>
            }

            <Form.Item
                label="角色权限"
                name="roleIds"
                rules={[{ required: true, message: '请选择角色权限!' }]}
            >
                <Select
                    mode="multiple"
                    allowClear
                    style={{ width: '100%' }}
                >
                    {roleList.map(item => <Option key={item.tag}>{item.name}</Option>)}
                </Select>
            </Form.Item>
        </Form>
    </Modal>
}

export default AddModule;